import React, { useState } from "react";
import { ThirdMenuItem } from "../button";
import ButtonGroup from "../button-group";
import classNames from "classnames";
import "./index.less";

//<MenuGroup onClick={onClick} data={data.children} button={ThirdMenuItem}></MenuGroup>

function Item({ currentIndex, index, onClick, data, button }) {
    let Button = button;
    return (
        <div className="menu-group-item">
            <Button
                selected={currentIndex == index}
                onClick={() => {
                    onClick(data, index);
                }}>
                {data.label}
            </Button>
            {currentIndex == index && data.children && (
                <div className="top-children-menu">
                    <ButtonGroup data={data.children} onClick={onClick}></ButtonGroup>
                </div>
            )}
        </div>
    );
}

function MenuGroup({ data, onClick, button, style, className }) {
    let [currentIndex, setCurrentIndex] = useState("");
    return (
        <div className={classNames("menu-group", { [className]: true })} style={style}>
            {data.map((item, index) => {
                return (
                    <Item
                        key={item.value}
                        currentIndex={currentIndex}
                        index={item.value}
                        button={button}
                        data={item}
                        onClick={(node, index) => {
                            setCurrentIndex(item.value);
                            onClick && onClick(node, index);
                        }}></Item>
                );
            })}
        </div>
    );
}

export default MenuGroup;
